table
  .show_for_pinned
    display: none

// Mobile
@media only screen and (max-width: 767px)
  table.responsive
    margin-bottom: 0
  .table-wrapper
    .scrollable, .pinned
      table
        td, th
          line-height: 21px
    .pinned
      position: absolute
      left: 0
      top: 0
      background: #fff
      width: 200px

      overflow: hidden
      overflow-x: scroll
      //border-right: 1px solid #ccc
      //border-left: 1px solid #ccc
      table
        border-right: none
        border-left: none
        width: 100%
        .show_for_pinned
          display: table-cell
        .hide_for_pinned
          display: none
        th, td
          white-space: nowrap

  div.table-wrapper
    position: relative
    margin-bottom: 20px
    overflow: hidden


    border-radius: 5px
    div.scrollable
      table
        margin-left: 200px
        width: auto
        width: 200px
        min-width: 60%
      overflow: scroll
      overflow-y: hidden
  table.responsive
    td
      position: relative
      white-space: nowrap
      overflow: hidden
    th
      position: relative
      white-space: nowrap
      overflow: hidden
      &.pin_for_mobile
        display: none
    td.pin_for_mobile, &.pinned td
      display: none

@media only screen and (max-width: 567px)
  div.table-wrapper
    border-right: 1px solid #ccc